<script lang="ts" setup>
const props = defineProps({
  width: {
    type: Number,
    default: 300
  },
  height: {
    type: Number,
    default: 300
  },
  color: {
    type: String,
    default: "gray"
  }
})
import { onMounted } from "vue"
onMounted(() => {
  const canvas = document.querySelector(".j-scratch-card-mask") as HTMLCanvasElement
  const card = document.querySelector(".j-scratch-card") as HTMLCanvasElement
  canvas.style.width = props.width + "px"
  canvas.style.height = props.height + "px"
  card.style.width = props.width + "px"
  card.style.height = props.height + "px"
  const ctx = canvas.getContext("2d") as CanvasRenderingContext2D
  ctx.beginPath()
  ctx.rect(0, 0, props.width, props.height)
  ctx.fillStyle = props.color
  ctx.fill()
  ctx.closePath()
  canvas.onmousedown = function () {
    canvas.onmousemove = function (e) {
      const x = e.offsetX
      const y = e.offsetY
      ctx.clearRect(x, y, props.width / 10, props.height / 10)
    }
  }
  canvas.onmouseup = function () {
    canvas.onmousemove = null
  }
})
</script>

<template>
  <div class="content">
    <div class="j-scratch-card" />
    <canvas class="j-scratch-card-mask" :width="props['width']" :height="props['height']" />
  </div>
</template>
<style lang="scss" scoped>
.content {
  margin: auto;
  position: relative;
  .j-scratch-card {
    background: url("@/assets/layouts/logo-text-1.png") no-repeat;
    background-size: cover;
  }
  .j-scratch-card-mask {
    position: absolute;
    top: 0;
    left: 0;
  }
}
</style>
